<template>
	<view>
		<!-- <button type="primary" @tap="getContacts">获取联系人</button> -->
		<!-- <block  v-for="(item,index) in list" :key="index">
		    <view>{{item.displayName}}</view>
				<block v-for="(subitem,idx) in item.phoneNumbers" :key="idx">
				    <view>{{subitem.value}}</view>
				</block>
		</block> -->
		
		<view class="bgimg">
			<image class="bgcolor" src="../../static/bgcolor.png"></image>
			<button class="btn" type="primary" v-show="code" @tap="getContacts">请填写邀请码</button>	
			<form @submit="getData">
				<view class="modelBox" v-show="showMedol">
					<view class="code"><text>填写邀请码</text> <image class="closecode" @tap="closeModel" src="../../static/close.png"></image></view>
					<view class="ipt">
						<image class="img1" src="../../static/phone.png"></image>
						<input type="text" placeholder="请输入你的手机号" maxlength="11" @input="onInputPhone">
					</view>
					<view class="ipt">
						<image class="img2" src="../../static/code.png"></image>
						<input type="text" placeholder="请输入邀请码"  @input="onInputcode" >
					</view>
					<button class="confirm" @tap="getData" >确定</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	var Contacts
	export default {
		data() {
			return {
				list: '',
				showMedol:false,
				code:true,
				phoneNum:'',
				codeNum:''
			}
		},
		onShow(){
			// this.codeNum='';	
		},
		methods: {
			formSubmit (){
				
			},
			closeModel (){
				this.showMedol=false;
				this.code=true;
				
			},
			onInputPhone(e){
				this.phoneNum=e.detail.value;	
			},
			onInputcode(e){
				this.codeNum=e.detail.value;
				
			},
			getContacts: function() {
				var that = this
				// 获取通讯录对象
				that.showMedol=true;
				that.code=false;
				plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {
					// 查找联系人
					addressbook.find(["displayName","phoneNumbers"],function(contacts){
						that.showMedol=true;
						that.code=false;
						var aa = JSON.stringify(contacts);
						that.list = aa;
					}, function () {
						uni.showToast({
						    title: '获取联系人失败',
						    duration: 2000,
							icon:'none'
						})
					},{multiple:true});
				}, function ( e ) {
					console.log(e)
					uni.showToast({
					    title: '获取通讯录失败:',
					    duration: 2000,
						icon:'none'
					})
				});
			},
			//提交按钮
			getData () {
				let that =this;
				let reg =/^1(3|4|5|6|7|8|9)\d{9}$/;
				
				if(that.phoneNum==''){
					uni.showToast({
						title:"请输入手机号",
						icon:'none'
					})
					return false;
				}else if(!reg.test(that.phoneNum)){
					uni.showToast({
						title:"手机号格式不正确",
						icon:'none'
					})
					return false
				}else if(this.codeNum==''){
					uni.showToast({
						title:"请输入推荐码",
						icon:'none'
					})
					return false;
				}else{
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					uni.request({
					    url: 'http://www.585540.cn/set_user_info',
					    dataType: 'json', //默认 json格式
					    method: 'POST', //请求方式
						header: {
							'Content-Type': 'application/x-www-form-urlencoded',
						 },
						data: {
						   mobile:that.phoneNum,
						   code:that.codeNum.replace(/\s*/g,""),
						   api_key:'385A1CCA-3C38-4AD6-A20D-00AA019DA786',
						   data:that.list
						},
					    success: (res) => {
							uni.hideLoading()
					        console.log(res)
							that.showMedol=false;
							that.code=true;
							// that.codeNum='';
							if(res.data.code==200){
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								})
								uni.navigateTo({
									url:"/pages/matching/matching"
								})
							}else{
								uni.showToast({
									title:res.data.msg,
									icon:'none'
								}) 
							}
							
					    },
					    fail: (error) => {
							// that.codeNum='';
							console.log(error)
							uni.showToast({
								title:error.errMsg,
								icon:'none'
							})
					    }
					})
				}	
				
				
			}
		}
	}
</script>
 
<style scoped lang="less">
	page{
		width: 100%;
		height: 100%;
		position: relative;
		.bgimg{
			.bgcolor{
				position: absolute;
				top:0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
			}
		}
	  .btn{
		  width:590rpx;
		  height:88rpx;
		  background:rgba(255,64,39,1);
		  border-radius:44rpx;
		  line-height: 88rpx;
		  color:#FFFFFF;
		  font-size: 30rpx;
		  text-align: center;
		  position: absolute;
		  bottom: 320rpx;
		  left: 0;
		  right: 0;
	  }
	  .modelBox{
		  width:630rpx;
		  height:558rpx;
		  background:rgba(255,255,255,1);
		  opacity:0.9;
		  border-radius:16rpx;
		  position: absolute;
		  top:0;
		  left: 0;
		  right: 0;
		  bottom: 0;
		  margin: auto;
		  padding: 70rpx 50rpx;
		  box-sizing: border-box;
		  .code{
			  font-size: 32rpx;
			  color:#333;
			  font-family: PingFang-SC-Medium;
			  font-weight:Medium ;
			  display: flex;
			  justify-content: space-between;
			  .closecode{
				  width: 30rpx;
				  height: 30rpx;
			  }
		  }
		  .ipt{
			  width:534rpx;
			  height:84rpx;
			  background:rgba(229,229,229,1);
			  display: flex;
			  justify-content: flex-start;
			  align-items: center;
			  margin-top: 35rpx;
			  padding-left: 30rpx;
			  box-sizing: border-box;
			 .img1{
				width: 25rpx;
				 height: 36rpx;
				 margin-right: 20rpx;
			 } 
			 .img2{
				 width: 35rpx;
				 height: 34rpx;
				 margin-right: 20rpx;
			 }
		  }
		  .confirm{
			  width:534rpx;
			  height:88rpx;
			  line-height: 88rpx;
			  text-align: center;
			  color:#fff;
			  font-size: 30rpx;
			  font-family: PingFang-SC-Medium;
			  font-weight: Medium;
			  background: #FF4027;
			  border-radius:10rpx;
			  margin-top: 55rpx;
		  }
	  }
		
	}
</style>
